<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/message.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="stylesheet" type="text/css" href="../css/message.css">

</head>
<body>
    <div class="container-fluid">
        <div class="row">

            <div class="col-md-12" style="height: 20px"></div>

            <div class="col-md-3">
                <!--显示当前用户信息-->
                <div class="col-md-12" style="border: 1px solid black">
                    <div class="col-md-12" style="height: 20px"></div>
                    <div class="col-md-2"><img class="img-circle" src="head.jpeg" style="width: 50px; height: 50px" id="userHead" alt="头像"></div>
                    <div class="col-md-10">
                        <a class="col-md-12" style="font-size: 20px; font-weight: bold ;font-family: 微软雅黑,serif; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;" id="user" target="_blank" href="userData.html">用户昵称</a>
                        <label class="col-md-12" style="font-size: 15px" id="role">普通用户</label>
                    </div>
                    <div class="col-md-12" style="height: 10px"></div>

                </div>

                <div class="col-md-12" style="height: 20px"></div>

                <!--显示楼主信息与贴子信息-->
                <div class="col-md-12" style="border: 1px solid black">

                    <div class="col-md-12" style="height: 20px"></div>
                    <!--楼主信息-->
                    <div class="col-md-2"><img class="img-circle" src="head.jpeg" style="width: 50px; height: 50px" id="creatorHead" alt="头像"></div>
                    <div class="col-md-10">
                        <label class="col-md-12" style="font-size: 20px; font-weight: bold ;font-family: 微软雅黑,serif; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;; cursor:pointer; color: #0000cc" id="creator" onclick="toUserHome()">用户昵称</label>
                        <label class="col-md-12" style="font-size: 15px" id="creatorRole">普通用户</label>
                    </div>
                    <div class="col-md-12" style="height: 10px"></div>

                    <!--贴子信息-->
                    <div class="col-md-12" style="border-bottom: 1px solid gray"></div>
                    <div class="col-md-12" style="height: 10px"></div>
                    <label class="col-md-12" style="font-size: 18px; font-weight: bold ;font-family: 微软雅黑,serif;" id="postLikes">点赞数：</label>
                    <label class="col-md-12" style="font-size: 18px; font-weight: bold ;font-family: 微软雅黑,serif;" id="postCollects">收藏数：</label>
                    <label class="col-md-12" style="font-size: 18px; font-weight: bold ;font-family: 微软雅黑,serif;" id="postFloors">楼层数：</label>
                    <label class="col-md-12" style="font-size: 18px; font-weight: bold ;font-family: 微软雅黑,serif;" id="postComments">回复数：</label>
                    <div class="col-md-12" style="height: 10px"></div>
                </div>
            </div>

            <div class="col-md-8" style="border: 1px solid black">
                <!--贴子标题-->
                <div class="col-md-12" style="height: 20px"></div>
                <label class="col-md-12" style="font-size: 25px" id="postTitle">贴子标题</label>

                <!--贴子的删除-->
                <div class="col-md-2 col-md-offset-10" style="text-align: right">
                    <label style="font-size: 14px; color: #0000cc; text-align: right; cursor: pointer; display: none" id="deletePost" onclick="deletePost()">删除</label>
                </div>

                <!--贴子的详情-->
                <div class="col-md-12" style="border-bottom: 1px solid gray"></div>
                <div class="col-md-12" style="height: 5px"></div>
                <label class="col-md-8" style="font-size: 15px;color: #666666; white-space: pre" id="postDetail">贴子详情</label>
                <label class="col-md-4" style="font-size: 12px;color: #666666; white-space: pre; text-align: right" id="postDate">贴子发布日期</label>
                <div class="col-md-12" style="height: 20px"></div>

                <div class="col-md-12" style="font-size: 18px; font-weight: bold; font-family: 微软雅黑,serif; white-space: pre-wrap; min-height: 100px" id="postContent">贴子内容</div>
                <div class="col-md-12" style="height: 20px"></div>
                <div class="col-md-12" style="border-bottom: 1px solid gray"></div>
                <div class="col-md-12" style="height: 20px"></div>

                <!--点赞收藏-->
                <div class="col-md-5 row-no-gutters">
                    <div class="col-md-2">
                        <img class="col-md-6" src="like.png" alt="点赞" style="width: 28px; height: 28px;; cursor: pointer" id="changePostLiked" onclick="changeLiked()"/>
                        <label class="col-md-6" style="text-align: left; width: 28px; height: 28px; padding-top: 5px; font-size: 15px" id="postLikedLabel">&nbsp;0</label>
                    </div>
                    <div class="col-md-2" href="">
                        <img class="col-md-6" src="collect.png" alt="收藏" style="width: 28px; height: 28px;; cursor: pointer" id="changePostCollected" onclick="changeCollected()"/>
                        <label class="col-md-6" style="text-align: left; width: 28px; height: 28px; padding-top: 5px; font-size: 15px" id="postCollectedLabel">&nbsp;0</label>
                    </div>
                </div>

                <!--回复贴子-->
                <div class="col-md-3 col-md-offset-4" id="replyPost">
                    <!--添加图片选择-->
                    <label class="col-md-6" style="font-size: 14px; text-align: right; cursor: pointer; color: #0000cc; padding-top: 5px" onclick="addImage()" unselectable="on" onmousedown="return false;">插入图片</label>
                    <input type="file" style="display: none" id="selectImage" onchange="selectOnChange()">
                    <!--通过这个回复按钮发送的回复为根回复，所以参数根回复 id 为 null-->
                    <button class="col-md-6" type="button" style="background: #FFF888; border: 1px solid black; height: 28px" onclick="createPostComment('null')">回复贴子</button>
                </div>
                <div class="col-md-12" style="height: 10px"></div>

                <!--内容编辑与预览-->
                <div class="col-md-12" id="replyInput">
                    <div class="col-md-12 row-no-gutters" style="height: 200px; font-size: 17px; min-height: 100px; background: white; border: 1px solid black; padding: 5px; overflow: auto" contenteditable="true" id="commentContent"><div></div></div>
                </div>
                <div class="col-md-12" style="height: 40px"></div>

                <!--回复列表显示区域-->
                <div class="col-md-12 row-no-gutters">

                    <!--分割行-->
                    <div class="col-md-12" style="border-bottom: 1px solid darkgray"></div>

                    <!--回复列表显示（显示的都为根回复）-->
                    <div class="col-md-12 row-no-gutters" id="commentList"></div>

                    <div class="col-md-12" style="height: 20px"></div>

                    <!--显示翻页器-->
                    <div class="row" nowPage="1" maxPage="1" maxDisplay="8" id="pageTurner">
                        <button class="col-md-2 col-md-offset-2" style="border: 1px solid black; height: 40px; text-align: center"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(-1, totalNum, myGetPageComment)">上一页</button>
                        <label class="col-md-2 col-md-offset-1" style="font-size: 20px; text-align: center" id="pageLabel">1 / 1</label>
                        <button class="col-md-2 col-md-offset-1" style="border: 1px solid black; height: 40px; text-align: center;"  onmouseover=over(this) onmouseout=out(this) onclick="updatePageTurnerRoot(1, totalNum, myGetPageComment)">下一页</button>
                    </div>
                </div>

                <div class="col-md-12" style="height: 20px"></div>
            </div>
            <div class="col-md-12" style="height: 40px"></div>
        </div>
    </div>

    <script type="text/javascript">
        let user, post, creator;
        var totalNum;

        let commentContent = $("#commentContent");
        let selectImage = $("#selectImage");
        let commentList = $("#commentList");

        let resourceIdentify;

        // 按页数请求得到评论
        let myGetPageComment = function getPageComment() {
            // 获取翻页器
            let pageTurner = $("#pageTurner");

            // 获取当前页数和最大显示数量
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            // 根回复 id 传入 null 以获得贴子的根回复，以及只查找正常的贴子
            $.post("/QG_PostBar/post?method=getAllPostCommentByPage", {"postId": post.postId, "rootCommentId": "null", "page": nowPage, "num": maxDisplay}, function (data){
                // 先清空列表
                commentList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个评论的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取评论对象，并添加进去
                    const postComment = data[key];
                    addCommentItem(commentList, postComment, myGetPageComment);
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

        // 请求得到用户信息
        $.ajaxSettings.async = false;
        $.post("/QG_PostBar/user?method=getUserBySession", function (data){
            user = data;

            // 修改绑定
            nowUser = user;

            $("#user").html(user.userName + "（我）");
            if (user.userHead != null) {
                $("#userHead").attr("src", "/QG_PostBar/user_head/" + user.userHead);
            }

            // 检查用户是否已经点赞过
            $.get("/QG_PostBar/post?method=isUserLiked", function (data) {
               if (data === "true") {
                   $("#changePostLiked").attr("src", "liked.png");
               }
            });

            // 检查用户是否已经收藏过
            $.get("/QG_PostBar/post?method=isUserCollected", function (data) {
                if (data === "true") {
                    $("#changePostCollected").attr("src", "collected.png");
                }
            });

            // 判断身份
            if(user.userRole === 1) {
                $("#role").html("系统管理员");
            }
        }, "json");

        // 记录用户浏览
        $.get("/QG_PostBar/post?method=addPostBrowsing");

        // 请求得到贴子信息
        $.post("/QG_PostBar/post?method=getPostBySession", function (data) {
            post = data;

            // 修改绑定
            nowPost = post;

            // 判断贴子是否为公告贴，是公告贴且不是吧主的，不允许回贴
            if (post.postAdminId != null && post.postAdminId !== user.userId) {
                $("#replyPost").hide();
                $("#replyInput").hide();
            }

            // 请求得到楼主与贴子信息，然后更新贴子数据
            $.get("/QG_PostBar/user?method=getUserById", {"userId": post.userId}, function (data){
                creator = data;

                if(creator.userRole === 1) {
                    $("#creatorRole").html("系统管理员");
                }
                // 更新贴子基本显示层
                updatePost();
            }, "json");

            // 更新贴子回复层数据
            if (post.postFloor > 0) {
                maxPage =  Math.floor((parseInt(post.postFloor)-1) / 8) + 1;
            } else {
                maxPage = 1;
            }

            totalNum = post.postFloor;
            // 更新翻页器
            updatePageTurnerRoot(0, totalNum);
            myGetPageComment();
        }, "json");

        // 请求得到贴吧消息
        $.post("/QG_PostBar/postBar?method=getPostBarBySession", function (data) {
            // 判断用户是否有权限删除该贴子（贴子发布者，贴吧创建者可以）
            if (user.userId === post.userId || user.userId === data.userId){
                $("#deletePost").show();
            }

        }, "json");
        $.ajaxSettings.async = true;

        // 执行 点赞/取消点赞 操作
        function changeLiked() {
            $.get("/QG_PostBar/post?method=changePostLiked", {"postId": post.postId, "userId": user.userId}, function (data){
                // 判断是点赞还是取消点赞，改变对应的图标，然后更新贴子数据
                if (data === "create") {
                    post.postLiked++;
                    $("#changePostLiked").attr("src", "liked.png");
                } else{
                    post.postLiked--;
                    $("#changePostLiked").attr("src", "like.png");
                }
                updatePost();
            }, "text");
        }

        // 执行 收藏/取消收藏 操作
        function changeCollected() {
            $.get("/QG_PostBar/post?method=changePostCollected", {"postId": post.postId, "userId": user.userId}, function (data){
                // 判断是收藏还是取消收藏，改变对应的图标，然后更新贴子数据
                if (data === "create") {
                    post.postCollected++;
                    $("#changePostCollected").attr("src", "collected.png");
                } else{
                    post.postCollected--;
                    $("#changePostCollected").attr("src", "collect.png");
                }
                updatePost();
            }, "text");
        }

        // 更新贴子数据
        function updatePost() {
            $("#creator").html(creator.userName + "（楼主）");
            if (creator.userHead != null) {
                $("#creatorHead").attr("src", "/QG_PostBar/user_head/" + creator.userHead);
            }

            $("#postTitle").html(post.postName);
            $("#postDate").html(post.createDate);
            $("#postDetail").html(creator.userName + "\t\t阅读量：" + post.postBrowsing + "\t\t点赞数：" + post.postLiked + "\t\t收藏数：" + post.postCollected + "\t\t评论数：" + post.postComment);
            $("#postContent").html(post.postContent);

            $("#postLikes").html("点赞数：" + post.postLiked);
            $("#postCollects").html("收藏数：" + post.postCollected);
            $("#postFloors").html("楼层数：" + post.postFloor)
            $("#postComments").html("回复数：" + post.postComment);

            $("#postLikedLabel").html("&nbsp;"+post.postLiked);
            $("#postCollectedLabel").html("&nbsp;"+post.postCollected);
        }

        // 使用别的按钮调用文件上传界面
        function addImage() {
            selectImage.click();
        }

        // 图片上传后进入预览状态
        function selectOnChange() {
            //判断文件类型,是否为指定格式的图片
            const suffix = selectImage.val().substring(selectImage.val().lastIndexOf(".") + 1).toLowerCase();
            if(!(suffix === "png" || suffix ==="jpg" || suffix === "jpeg")){
                alert("必须上传 png、jpg 或 jpeg 格式的图片!");
                return false;
            }

            //判断文件大小
            const size = selectImage[0].files[0].size;
            if (size > 5 * 1024 * 1024) {
                alert("图片大小不能大于 5M! ");
                return false;
            }

            // 判断唯一标识是否存在，不存在则创建一个
            if(resourceIdentify === undefined) {
                resourceIdentify = user.userId + "-" + Date.now();
            }

            // 一切就绪，上传图片！！！
            const formData = new FormData();

            formData.append("file", selectImage[0].files[0]);
            formData.append("resourceIdentify", resourceIdentify);

            $.ajax({
                type : "post",
                url : "/QG_PostBar/post?method=setPostCommentImage",
                data : formData,
                processData : false,
                contentType : false,
                success : function(data){
                    if (data === "error") {
                        alert("图片上传失败!");
                    } else {
                        // 先判断编辑框有没有得到焦点
                        if (document.activeElement.id === "commentContent") {
                            // 有的话将图片插入到div的光标位置处
                            var range, node;
                            if (window.getSelection && window.getSelection().getRangeAt) {
                                range = window.getSelection().getRangeAt(0);
                                range.collapse(false);
                                node = range.createContextualFragment("<img style='max-width: 100%; window.event.returnValue=false; max-height: 100%' src='/QG_PostBar/post_comment_Image/" + data + "'/>");
                                var c = node.lastChild;
                                range.insertNode(node);
                                if (c) {
                                    range.setEndAfter(c);
                                    range.setStartAfter(c)
                                }
                                var j = window.getSelection();
                                j.removeAllRanges();
                                j.addRange(range);
                                //commentContent.focus();
                            }
                        } else {
                            // 没有的话将图片添加到编辑框的最后
                            commentContent.append("<img style='max-width: 100%; window.event.returnValue=false; max-height: 100%' src='/QG_PostBar/post_comment_Image/" + data + "'/>")
                        }

                    }
                }
            });
        }

        // 监听输入框的变化，有图片被删除就需要在服务器中删除对应已经上传的图片
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                // 如果检查到删除操作，且删除的为图片时
                $(mutation.removedNodes).each(function(value, index) {
                    if(this.nodeType === 1 && this.src !== undefined) {
                        console.log(this);
                        // 截取出图片的名称
                        alert(this);
                        let imageName = this.src.substring(this.src.lastIndexOf("/")+1);
                        alert(this.src.toString());
                        // 然后交给服务器删除该上传的图片
                        $.get("/QG_PostBar/post?method=deletePostCommentImage", {"imageName": imageName}, function (data){
                            if (data !== "true") {
                                alert("删除图片失败！");
                            }
                        })
                    }
                });
            });
        });

        // 不能这么干，先注释掉
        // var config = { attributes: true, childList: true, characterData: true , subtree: true};
        // observer.observe($('#commentContent')[0], config);

        // 创建贴子回复，并标明根回复 id，为 null 则是根回复（保存一整个 div 到评论内容中）
        function createPostComment(rootCommentId) {
            // 保存到数据库
            $.post("/QG_PostBar/post?method=createPostComment",
                {"postId": post.postId, "userId": user.userId ,"rootCommentId": rootCommentId, "commentContent": commentContent.html(), "resourceIdentify": resourceIdentify}, function (data) {

                if (data.commentContent != null) {
                    success_prompt("发布回复成功");
                    myGetPageComment();
                    commentContent.empty();
                } else {
                    alert("发布回复失败！请再次尝试");
                }
            }, "json");
        }

        function toUserHome() {
            window.open("userHome.html?userId="+creator.userId);
        }

        /**
         * 负责更新翻页器数据（作用的对象是静态添加的翻页器，而不是动态添加的列表中的翻页器）
         * 获取到翻页器和显示标签、以及要显示的总量
         * 更新最大页数
         * 然后通过翻页标识、当前页数和最大页数判断如何执行翻页操作
         * @param turnPage 翻页标识（-1表示上一页，0表示不翻页，1表示下一页）
         * @param totalNum 目前翻页器对应列表的数据总条数
         * @param updatePage 作为回调函数，即发生翻页后调用来显示新的数据
         */
        function updatePageTurnerRoot(turnPage, totalNum, updatePage) {
            // 获取翻页器和显示标签
            let pageTurner = $("#pageTurner");
            let pageLabel = $("#pageLabel");

            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            // 计算最大页数
            let newMaxPage;
            if (totalNum === 0) {
                newMaxPage = 1
            } else {
                newMaxPage =  Math.floor((totalNum-1) / maxDisplay) + 1;
            }

            // 判断翻页标识（以及是否翻页成功）
            let isTurn = false;
            if (nowPage+turnPage > 0 && nowPage+turnPage <= newMaxPage) {
                nowPage += turnPage;
                isTurn = true;
            }

            // 判断更新后的页数变化（可能执行了删除操作，导致当前页数小于最大页数，这时候要将当前页数改为最大页数）
            if (nowPage > newMaxPage) {
                nowPage = newMaxPage;
            }

            // 将新的数据显示出来
            pageLabel.html(nowPage + " / " + newMaxPage);

            // 将新的数据更新到翻页器中
            pageTurner.attr("nowPage", "" + nowPage);
            pageTurner.attr("maxPage", "" + newMaxPage);
            pageTurner.attr("maxDisplay", "" + maxDisplay);

            // 调用翻页函数
            if (updatePage !== undefined && isTurn) {
                updatePage();
            }
        }

        // 删除贴子
        function deletePost() {
            if (confirm("确认删除该贴子")) {
                $.get("/QG_PostBar/post?method=deletePost", {"postId": post.postId}, function (data){
                    if (data === "true") {
                        // 删除成功，跳转到贴子列表界面
                        window.location.href = "postBarContent.html";
                    }
                });
            }
        }

        function over(obj) {
            obj.style.backgroundColor = "#FFFCCC";
        }

        function out(obj) {
            obj.style.backgroundColor = "#FFFFFF";
        }
    </script>

</body>
</html>